<template>
  <div>
    <h1>S3</h1>
    <h1>单文件上传</h1>
    <el-upload
      class="upload-demo"
      action="xx"
      :on-change="handleChange"
      :http-request="uploadFile"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-progress
      v-if="uploadPercentage"
      :text-inside="true"
      :stroke-width="22"
      :percentage="uploadPercentage"
      status="warning"
    ></el-progress>
    <hr />
    <h1>批量上传</h1>
    <p>批量上传：<input type="file" multiple @change="allFileChange($event)"></input></p>
    
    <p>上传文件夹：<input type="file"  webkitdirectory @change="allFileChange($event)"></input></p>
    

    <h4>当前上传的文件是：{{currentFile}}</h4>
     <el-progress
      v-if="allUploadPercentage"
      :text-inside="true"
      :stroke-width="22"
      :percentage="allUploadPercentage"
      status="warning"
    ></el-progress>
    <hr />

    <!-- <h1>上传文件夹</h1>
    <h4>当前上传的文件是：{{currentFile}}</h4>
     <el-progress
      v-if="DirUploadPercentage"
      :text-inside="true"
      :stroke-width="22"
      :percentage="DirUploadPercentage"
      status="warning"
    ></el-progress> -->
    <el-button type="primary" @click="deleteFile">删除文件</el-button>
    <el-button type="primary" @click="downfileHandler">下载文件</el-button>
    <el-progress
      v-if="percentage"
      :text-inside="true"
      :stroke-width="22"
      :percentage="percentage"
      status="warning"
    ></el-progress>

<hr>

<h2>当前服务器文件</h2>
<h2>当前服务器上文件数量：{{ serverFileList.length}}</h2>
<img :src="imgUrl" alt="" v-if="imgUrl" width="100px" height="100px">
<ul class="server-file-list-box"> 
  <li v-for="(file,index) in serverFileList" class="item">
    <span class="text">{{index}}. {{file.Key}}</span>
    <span class="btn-box">

     <el-button type="primary" v-if="file.Key.includes('png')||file.Key.includes('jpg')"  @click="showImg(file)"  size='mini'>预览</el-button>
     <el-button type="primary"  @click="downLoadFileByKey(file)"  size='mini'>下载</el-button>
     <el-button type="primary"  @click="deletedFileByKey(file)" size='mini'>删除</el-button>
    </span>
  </li>
</ul>

  </div>
</template>
<script>
import S3 from "../util/s3";
export default {
  mame: "Demo",
  mounted() {
    this.getList();
  },
  components: {},
  data() {
    return {
      file: null,
      lastFileName: "",
      imgUrl:'',
      percentage: 0,
      uploadPercentage: 0,
      allUploadPercentage: 0,
      DirUploadPercentage:0,
      currentFile: "",
      serverFileList: [],
    };
  },
  methods: {
    allFileChange(e) {
      console.log("e", e.target.files);
      this.allUploadPercentage = 1;
      let totelProgressFn = (data) => {
        console.log("页面拿到的data", data);
        let message = `正在上传文件${data.name},进度为${data.progress}`;
        console.log(message);
        this.currentFile = data.name;
        // 单个文件，单个上传进度
        // this.allUploadPercentage = Number(data.progress);

        // 整体一个上传进度
        let t = Array.from(e.target.files).reduce((t, c, i) => {
          if (data.index === i) {
            return t + Number(data.progress);
          }
          if (data.index < i) {
            return t;
          }
          if (data.index > i) {
            return t + 100;
          }
        }, 0);

        this.allUploadPercentage = +Number(
          t / Array.from(e.target.files).length
        ).toFixed(0);
        console.log("this.allUploadPercentage", this.allUploadPercentage);
      };
      S3()
        .uploadFiles({ files: e.target.files, totelProgressFn })
        .then((res) => {
          console.log("res", res);
          if (res.state === 1) {
            this.getList();
            this.$message.success("批量上传成功！");
            console.log("批量上传成功！");
          }
        });
    },
    uploadFile(data) {
      console.log("data", data);
      this.uploadPercentage = 10;
      let progressFn = (data) => {
        this.uploadPercentage = Number(data);
      };
      S3()
        .upload({ file: data.file, progressFn })
        .then((res) => {
          console.log("res", res);
          if (res.state === 1) {
            this.$message.success("上传成功！");
            this.getList();
          }
        });
    },
    multipleUploadFile(data) {
      console.log("data", data);
    },
    handleChange(file, fileList) {
      // console.log("fileList", fileList);
      // console.log("file", file);
    },
    downfileHandler(key) {
      S3()
        .getFileUrl(key)
        .then((res) => {
          console.log("res", res);
        });
      this.percentage = 0;
      let progressFn = (data) => {
        this.percentage = Number(data);
      };
      let fileName = key;
      S3()
        .downFile({ fileName, progressFn })
        .then((res) => {
          console.log("res", res);
          if (res.state === 1) {
            this.$message.success("下载成功！");
          }
        });
    },
    deleteFile(key) {
      let arr = [
        {
          //  Key: 'STRING_VALUE', /* required */
          // VersionId: 'STRING_VALUE'
          Key: key,
        },
      ];
      S3()
        .deleteFile(arr)
        .then((res) => {
          console.log("res", res);
          if (res.state === 1) {
            this.$message.success("删除成功！");
            this.getList();
          }
        });
    },

    getList() {
      S3()
        .getFileListInBucket()
        .then((res) => {
          console.log("res", res);
          let data = res.data.Contents.sort((a,b)=>{
            return  new Date(b.LastModified) - new Date(a.LastModified) 
          })
          this.serverFileList = data|| [];
        });
    },
    downLoadFileByKey(item) {
      this.downfileHandler(item.Key);
    },
    deletedFileByKey(item) {
      this.deleteFile(item.Key);
    },
    showImg(file){
         S3()
        .getFileUrl(file.Key)
        .then((res) => {
          console.log("res", res);
          this.imgUrl=res.url
        });
    }
  },
};
</script>
<style lang="scss">
.server-file-list-box{
  list-style: none;
  .item{
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    .text{

    }
  }
}

</style>
